<template>
  <div class="app-container">
    <h2 style="text-align: center">发布软笔资源包</h2>

    <el-steps
      :active="3"
      process-status="wait"
      align-center
      style="margin-bottom: 40px"
    >
      <el-step title="添加软笔书目录" />
      <el-step title="添加软笔书单元" />
      <el-step title="添加章节" />
    </el-steps>
    <div>
      <el-form :inline="true">
        <el-form-item>
          <el-button type="primary" @click="addChapter(0)">新增</el-button>
        </el-form-item>
      </el-form>
    </div>
    <el-table
      :data="chapterList"
      stripe
      v-loading="dataListLoading"
      style="width: 100%"
      ref="chapter"
    >
      <el-table-column type="expand">
        <template slot-scope="props">
          <el-table :data="props.row.children" stripe style="width: 100%" ref="cp">
            <el-table-column type="expand">
              <template slot-scope="scope">
                <el-table :data="scope.row.children" stripe style="width: 100%"
                  >
                  <el-table-column
                    header-align="center"
                    align="center"
                    label="链接id"
                    prop="id"
                  >
                  </el-table-column>
                  <el-table-column
                    header-align="center"
                    align="center"
                    label="音频"
                    prop="sounds"
                  >
                    <template slot-scope="scope">
                      <audio :src="scope.row.sounds" controls="controls">
                        您的浏览器不支持音频播放
                      </audio>
                    </template>
                  </el-table-column>
                  <el-table-column
                    header-align="center"
                    align="center"
                    label="操作"
                  >
                    <template slot-scope="scope">
                      <el-button type="text" @click="addWord(1, scope.row.id, scope.row)"
                        >修改</el-button
                      >
                      <el-button type="text" @click="deleteWord(scope.row.id, scope.row)"
                        >删除</el-button
                      >
                    </template>
                  </el-table-column>
                </el-table>
              </template>
            </el-table-column>
            <el-table-column
              prop="chapterPicture"
              header-align="center"
              align="center"
              label="章节图片"
            >
              <template slot-scope="scope">
                <el-image :src="scope.row.chapterPicture"></el-image>
              </template>
            </el-table-column>
            <el-table-column
              prop="corder"
              header-align="center"
              align="center"
              label="章节图片顺序"
            ></el-table-column>
            <el-table-column header-align="center" align="center" label="操作">
              <template slot-scope="scope">
                <el-button type="text" @click="addWord(0, scope.row.id, scope.row)"
                  >添加链接</el-button
                >
                <el-button
                  type="text"
                  @click="addChapterPicture(1, scope.row.id, scope.row)"
                  >修改</el-button
                >
                <el-button
                  type="text"
                  @click="deleteChapterPicture(scope.row.id, scope.row)"
                  >删除</el-button
                >
              </template>
            </el-table-column>
          </el-table>
        </template>
      </el-table-column>
      <el-table-column
        prop="name"
        header-align="center"
        align="center"
        label="章节名称"
      ></el-table-column>
      <el-table-column
        prop="corder"
        header-align="center"
        align="center"
        label="章节顺序"
      ></el-table-column>
      <el-table-column
        prop="page"
        header-align="center"
        align="center"
        label="章节页码"
      ></el-table-column>
      <el-table-column header-align="center" align="center" label="操作">
        <template slot-scope="scope">
          <el-button type="text" @click="addChapterPicture(0, scope.row.id, scope.row)"
            >添加图片</el-button
          >
          <el-button style="" type="text" @click="addChapter(1, scope.row.id, scope.row)"
            >修改</el-button
          >
          <el-button type="text" @click="deleteById(scope.row.id, scope.row)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <el-dialog
      :visible.sync="dialogChapterVisible"
      :title="type == 0 ? '添加章节信息' : '修改章节信息'"
    >
      <el-form
        :rules="dataRule"
        ref="chapterForm"
        :model="chapter"
        label-width="120px"
      >
        <el-form-item label="名称" prop="name">
          <el-input v-model="chapter.name" />
        </el-form-item>
        <el-form-item label="顺序" prop="corder">
          <el-input-number
            v-model="chapter.corder"
            controls-position="right"
            :min="1"
          ></el-input-number>
        </el-form-item>
        <el-form-item label="页码" prop="page">
          <el-input v-model="chapter.page" />
        </el-form-item>
        <el-form-item label="定位" prop="ryProportion">
          <el-input
            placeholder="左上角x"
            v-model="chapter.lxProportion"
            style="width: 140px"
          >
            <template slot="append">%</template>
          </el-input>
          <el-input
            placeholder="左上角y"
            v-model="chapter.lyProportion"
            style="width: 140px"
          >
            <template slot="append">%</template>
          </el-input>
          <el-input
            placeholder="右下角x"
            v-model="chapter.rxProportion"
            style="width: 140px"
          >
            <template slot="append">%</template>
          </el-input>
          <el-input
            placeholder="右下角y"
            v-model="chapter.ryProportion"
            style="width: 140px"
          >
            <template slot="append">%</template>
          </el-input>
        </el-form-item>
        <el-form-item label="计算定位">
          <el-button type="primary" @click="toCountPos('contents', contents)"
            >计算定位</el-button
          >
        </el-form-item>
        <!-- <el-image :src="contents" ref="pos" @click="getPos(this, event)" /> -->
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogChapterVisible = false">取 消</el-button>
        <el-button
          :disabled="saveChapterBtnDisabled"
          type="primary"
          @click="saveOrUpdate"
          >确 定</el-button
        >
      </div>
    </el-dialog>

    <el-dialog
      :visible.sync="dialogChapterPictureVisible"
      :title="type == 0 ? '添加图片信息' : '修改图片信息'"
    >
      <el-form
        :rules="dataRule1"
        ref="chapterPictureForm"
        :model="chapterPicture"
        label-width="120px"
      >
        <el-form-item label="图片" prop="chapterPicture">
          <el-upload
            class="avatar-uploader"
            :action="'http://121.41.167.195:8000/api/oss/upload'"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
            :before-upload="beforeAvatarUpload"
          >
            <img
              v-if="chapterPicture.chapterPicture"
              :src="chapterPicture.chapterPicture"
              class="avatar"
            />
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
        <el-form-item label="顺序" prop="corder">
          <el-input-number
            v-model="chapterPicture.corder"
            controls-position="right"
            :min="1"
          ></el-input-number>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogChapterPictureVisible = false"
          >取 消</el-button
        >
        <el-button
          :disabled="saveChapterPictureBtnDisabled"
          type="primary"
          @click="saveOrUpdate1"
          >确 定</el-button
        >
      </div>
    </el-dialog>

    <el-dialog
      :visible.sync="dialogWordVisible"
      :title="type == 0 ? '添加链接信息' : '修改链接信息'"
    >
      <el-form
        :rules="dataRule2"
        ref="wordForm"
        :model="word"
        label-width="120px"
      >
        <el-form-item label="音频">
          <el-upload
            :on-success="handleAudioUploadSuccess1"
            :on-remove="handleAudioRemove"
            :on-exceed="handleUploadExceed"
            :action="'http://121.41.167.195:8000/api/oss/upload'"
            class="upload-uploader"
            ref="sounds"
            :before-upload="beforeAudioUpload"
            :show-file-list="false"
          >
            <audio :src="word.sounds" controls="controls">
              您的浏览器不支持音频播放
            </audio>
          </el-upload>
        </el-form-item>
        <el-form-item label="字体">
          <el-select v-model="word.tid" filterable  placeholder="请选择字体">
            <el-option
              v-for="z in zList"
              :key="z.id"
              :label="z.name"
              :value="z.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="定位" prop="ryProportion">
          <el-input
            placeholder="左上角x"
            v-model="word.lxProportion"
            style="width: 140px"
          >
            <template slot="append">%</template>
          </el-input>
          <el-input
            placeholder="左上角y"
            v-model="word.lyProportion"
            style="width: 140px"
          >
            <template slot="append">%</template>
          </el-input>
          <el-input
            placeholder="右下角x"
            v-model="word.rxProportion"
            style="width: 140px"
          >
            <template slot="append">%</template>
          </el-input>
          <el-input
            placeholder="右下角y"
            v-model="word.ryProportion"
            style="width: 140px"
          >
            <template slot="append">%</template>
          </el-input>
        </el-form-item>
        <el-form-item label="计算定位">
          <el-button type="primary" @click="toCountPos('chapter', chapterPos)"
            >计算定位</el-button
          >
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogWordVisible = false">取 消</el-button>
        <el-button
          :disabled="saveWordBtnDisabled"
          type="primary"
          @click="saveOrUpdate2"
          >确 定</el-button
        >
      </div>
    </el-dialog>
    <div>
      <el-button @click="previous">上一步</el-button>
      <!-- <el-button :disabled="saveBtnDisabled" type="primary" @click="next"
        >下一步</el-button
      > -->
    </div>
  </div>
</template>

<script>
import Vue from "vue";
export default {
  data() {
    return {
      hang: {},
      saveBtnDisabled: false, // 下一步按钮是否禁用
      editionId: null,
      activeNames: ["1"],
      chapter: {
        // 章节对象
        name: "",
        corder: 1,
        id: null,
        page: null,
        lxProportion: "",
        lyProportion: "",
        rxProportion: "",
        ryProportion: "",
        uid: null,
      },
      chapterPicture: {
        cid: null,
        chapterPicture: "",
        corder: 1,
      }, // 章节图片
      word: {
        id: null,
        pid: null,
        tid: null,
        lxProportion: "",
        lyProportion: "",
        rxProportion: "",
        ryProportion: "",
        sounds: "",
      }, // 字体对象
      fileList: [], // 上传文件列表
      dataForm: { uid: null }, // 用于查询
      chapterList: [], // 章节集合
      unitList: [], // 单元集合
      dataListLoading: false, // 加载章节数据
      uploadLoading: false, // 上传按钮是否处于加载中
      pageIndex: 1, // 当前页
      pageSize: 10, // 每页数据显示几条
      totalPage: 0, // 总记录数
      srcList: [], // 章节图片集合
      type: 0, // 0:添加1:修改
      dialogChapterVisible: false, // 添加章节信息对话框
      dialogChapterPictureVisible: false, // 添加章节图片对话框
      dialogWordVisible: false, // 添加链接对话框
      saveChapterBtnDisabled: false, // 章节信息保存按钮是否禁用
      saveChapterPictureBtnDisabled: false, // 章节图片保存按钮是否禁用
      saveWordBtnDisabled: false, // 章节图片保存按钮是否禁用
      dataRule: {
        // 数据规则
        name: [{ required: true, message: "名称不能为空", trigger: "blur" }],
        corder: [{ required: true, message: "顺序不能为空", trigger: "blur" }],
        page: [{ required: true, message: "页面不能为空", trigger: "blur" }],
        ryProportion: [
          { required: true, message: "定位不能为空", trigger: "blur" },
        ],
      },
      contents: "", // 用于章节画框定位
      chapterPos: "", // 用于字体画框定位
      dataRule1: {
        // 数据规则
        name: [{ required: true, message: "名称不能为空", trigger: "blur" }],
        corder: [{ required: true, message: "顺序不能为空", trigger: "blur" }],
        chapterPicture: [{ required: true, message: "图片不能为空" }],
      },
      dataRule2: {
        // 数据规则
        ryProportion: [
          { required: true, message: "定位不能为空", trigger: "blur" },
        ],
      },
      zList: [], // 所有字
    };
  },

  activated() {
    // 看看是哪里来的
    this.dataListLoading = true;
    this.$http({
      url: this.$http.adornUrl(
        `/sf/cbchapter/getUnitIdById/${this.$route.params.id}`
      ),
      method: "get",
    }).then(({ data }) => {
      if (data && data.code === 0) {
        console.log(data);
        this.chapter.uid = data.unitId; // 获取unitId
        this.contents = data.contents; // 获取目录图片进行定位
        // 回显数据
        this.getChapterByUnitId();
      }
    });
    this.$http({
      url: this.$http.adornUrl(
        `/sf/cbtypeface/getWordAllList`
      ),
      method: "get",
    }).then(({ data }) => {
      if (data && data.code === 0) {
        this.zList = data.zList;
      }
    });
  },

  methods: {
    beforeAudioUpload(file) {
      const fileName = file.name;
      const fileType = fileName.substring(fileName.lastIndexOf("."));
      if (fileType !== ".mp3") {
        this.$message.error("上传音频只能是mp3!");
        return false;
      }
      return true;
    },
    beforeVideoUpload(file) {
      const fileName = file.name;
      const fileType = fileName.substring(fileName.lastIndexOf("."));
      if (fileType !== ".mp4" && fileType !== ".flv") {
        this.$message.error("上传视频频只能是mp4/flv!");
        return false;
      }
      return true;
    },
    // 去html页面计算定位
    toCountPos(type, src) {
      window.open(`http://121.41.167.195:8083/dist/u.html?${type}=${src}`);
    },
    // 定位
    getPos(o, e) {
      console.log(e, this.$refs["pos"]);
      var width = this.$refs["pos"].imageWidth;
      var height = this.$refs["pos"].imageHeight;
      this.chapter.lxProportion = (e.offsetX / width) * 100;
      this.chapter.lyProportion = (e.offsetY / height) * 100;
    },
    // ---------------------------视(音)频上传----------------------------------
    // 成功回调
    handleVodUploadSuccess(response, file, fileList) {
      // 上传视频的url
      this.word.video = response.url;
    },
    // 成功回调
    handleAudioUploadSuccess(response, file, fileList) {
      // 上传视频的url
      this.word.videoDessounds = response.url;
    },
    // 成功回调
    handleAudioUploadSuccess1(response, file, fileList) {
      // 上传视频的url
      console.log(response);
      this.word.sounds = response.url;
    },
    // 视图上传多于一个视频
    handleUploadExceed(files, fileList) {
      this.$message.warning("想要重新上传视(音)频，请先删除已上传的视(音)频");
    },
    // 删除之前，就是点击x的时候
    beforeVodRemove(file) {
      return this.$confirm(`确定移除 ${file.name}？`);
    },
    // 点击确定的时候进行彻底删除
    handleVodRemove() {
      this.word.video = "";
    },
    // 点击确定的时候进行彻底删除
    handleAudioRemove() {
      this.word.sounds = "";
    },
    //上传成功后的回调函数
    handleAvatarSuccess(response) {
      this.chapterPicture.chapterPicture = response.url;
    },
    beforeAvatarUpload() {},
    // 添加章节图片
    addChapterPicture(status, id, row) {
      this.hang = row;
      this.$nextTick(() => {
        this.$refs.chapterPictureForm.resetFields();
      });
      if (status == 0) {
        // 添加
        this.chapterPicture.cid = id;
        this.chapterPicture.chapterPicture = "";
      } else {
        // 修改
        // 回显数据
        this.$http({
          url: this.$http.adornUrl("/sf/cbchapterpicture/info/" + id),
          method: "get",
        }).then(({ data }) => {
          this.chapterPicture.id = data.cbChapterPicture.id;
          this.chapterPicture.chapterPicture =
            data.cbChapterPicture.chapterPicture;
          this.chapterPicture.corder = data.cbChapterPicture.corder;
          this.chapterPicture.cid = data.cbChapterPicture.cid;
        });
      }
      this.type = status;
      this.dialogChapterPictureVisible = true;
    },
    handleChange() {},
    // 获取章节数据
    getChapterByUnitId() {
      this.dataListLoading = true;
      this.$http({
        url: this.$http.adornUrl(`/sf/cbchapter/list`),
        method: "get",
        params: this.$http.adornParams({
          uid: this.chapter.uid,
        }),
      }).then(({ data }) => {
        if (data && data.code === 0) {
          console.log(data);
          this.chapterList = data.chapterList;
        } else {
          this.chapterList = [];
        }
        for (let i = 0; i < this.chapterList.length; i++) {
          if (this.hang.id == this.chapterList[i].id || this.hang.cid == this.chapterList[i].id) {
            this.$nextTick(() => {
              this.$refs.chapter.toggleRowExpansion(this.chapterList[i], true);
              if(this.hang.cid == this.chapterList[i].id){
                for(let j = 0; j < this.chapterList[i].children.length; j++){
                  if(this.hang.id == this.chapterList[i].children[j].id){
                    this.$nextTick(() => {
                      this.$refs.cp.toggleRowExpansion(this.chapterList[i].children[j], true);
                    })
                  }
                }
              }
            }); 
            break;
          }
          for(let j = 0; j < this.chapterList[i].children.length; j++){
            if(this.hang.pid == this.chapterList[i].children[j].id){
                this.$nextTick(() => {
                  this.$refs.chapter.toggleRowExpansion(this.chapterList[i], true);
                  this.$nextTick(() => {
                    this.$refs.cp.toggleRowExpansion(this.chapterList[i].children[j], true);
                  })
                })
                break;
            }
          }
        }
        this.dataListLoading = false;
      });
    },
    // 章节对话框中的保存或修改
    saveOrUpdate() {
      if (this.type == 0) {
        // 添加章节
        this.chapterFormSubmit();
      } else {
        // 修改章节
        this.updateChapter();
      }
    },
    // 章节图片对话框中的保存或修改
    saveOrUpdate1() {
      if (this.type == 0) {
        // 添加章节
        this.chapterPictureFormSubmit();
      } else {
        // 修改章节
        this.updateChapterPicture();
      }
    },
    // 字体对话框中的保存或修改
    saveOrUpdate2() {
      if (this.type == 0) {
        // 添加链接
        this.wordFormSubmit();
      } else {
        // 修改字体
        this.updateWord();
      }
    },
    // 删除章节图片
    deleteChapterPicture(id, row) {
      this.$confirm(`确定对[章节图片id=${id}]进行[删除]操作?`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.hang = row;
          this.$http({
            url: this.$http.adornUrl("/sf/cbchapterpicture/delete"),
            method: "post",
            data: this.$http.adornData([id], false),
          }).then(({ data }) => {
            if (data && data.code === 0) {
              this.$message({
                message: "删除成功",
                type: "success",
                duration: 1500,
                onClose: () => {
                  this.getChapterByUnitId();
                },
              });
            } else {
              this.$message.error(data.msg);
            }
          });
        })
        .catch(() => {});
    },
    // 删除字体
    deleteWord(id, row) {
      this.$confirm(`确定对[链接id=${id}]进行[删除]操作?`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.hang = row;
          this.$http({
            url: this.$http.adornUrl("/sf/cbtypefaceposition/delete"),
            method: "post",
            data: this.$http.adornData([id], false),
          }).then(({ data }) => {
            if (data && data.code === 0) {
              this.$message({
                message: "删除成功",
                type: "success",
                duration: 1500,
                onClose: () => {
                  this.getChapterByUnitId();
                },
              });
            } else {
              this.$message.error(data.msg);
            }
          });
        })
        .catch(() => {});
    },
    // 更新章节图片信息
    updateChapterPicture() {
      this.$refs["chapterPictureForm"].validate((valid) => {
        if (valid) {
          this.$http({
            url: this.$http.adornUrl(`/sf/cbchapterpicture/update`),
            method: "post",
            data: this.$http.adornData(
              {
                id: this.chapterPicture.id,
                corder: this.chapterPicture.corder,
                cid: this.chapterPicture.cid,
              },
              false
            ),
          }).then(({ data }) => {
            if (data && data.code === 0) {
              this.$message({
                message: "修改成功",
                type: "success",
                duration: 1500,
                onClose: () => {
                  this.getChapterByUnitId();
                  this.dialogChapterPictureVisible = false;
                },
              });
            } else {
              this.$message.error(data.msg);
            }
          });
        }
      });
    },
    // 打开对话框，添加、修改
    addChapter(status, id, row) {
      this.hang = row;
      // 重置表单 应该只是把表单有的清空而已
      this.$nextTick(() => {
        this.$refs.chapterForm.resetFields(); // this.$refs['chapterForm'].resetFields(); 可能不识别 、还是不识别
      });
      if (status == 0) {
        // 添加
        this.type = 0;
        // 清空
        this.chapter.lxProportion = "";
        this.chapter.lyProportion = "";
        this.chapter.rxProportion = "";
        this.chapter.id = null;
      } else {
        // 修改
        this.type = 1;
        // 回显数据
        this.$http({
          url: this.$http.adornUrl("/sf/cbchapter/info/" + id),
          method: "get",
        }).then(({ data }) => {
          this.chapter.id = data.cbChapter.id;
          this.chapter.name = data.cbChapter.name;
          this.chapter.corder = data.cbChapter.corder;
          this.chapter.page = data.cbChapter.page;
          this.chapter.uid = data.cbChapter.uid;
          this.chapter.lxProportion = data.cbChapter.lxProportion.replace(
            "%",
            ""
          );
          this.chapter.lyProportion = data.cbChapter.lyProportion.replace(
            "%",
            ""
          );
          this.chapter.rxProportion = data.cbChapter.rxProportion.replace(
            "%",
            ""
          );
          this.chapter.ryProportion = data.cbChapter.ryProportion.replace(
            "%",
            ""
          );
        });
      }
      this.dialogChapterVisible = true;
    },
    // 打开字体对话框
    addWord(status, id, row) {
      this.hang = row;
      // 重置表单 应该只是把表单有的清空而已
      this.$nextTick(() => {
        this.$refs.wordForm.resetFields();
      });
      if (status == 0) {
        // 添加
        // 清空
        this.word.pid = id;
        this.fileList = [];
        this.word.lxProportion = "";
        this.word.lyProportion = "";
        this.word.rxProportion = "";
        this.word.videoDessounds = "";
        this.word.sounds = "";
        this.word.id = null;
        this.word.tid = null;
        this.$http({
          url: this.$http.adornUrl(
            "/sf/cbchapterpicture/info/" + this.word.pid
          ),
          method: "get",
        }).then(({ data }) => {
          this.chapterPos = data.cbChapterPicture.chapterPicture;
          this.dialogWordVisible = true;
        });
      } else {
        // 修改
        // 回显数据
        this.$http({
          url: this.$http.adornUrl("/sf/cbtypefaceposition/info/" + id),
          method: "get",
        }).then(({ data }) => {
          this.word.id = data.cbTypefacePosition.id;
          this.word.tid = data.cbTypefacePosition.tid;
          this.word.sounds = data.cbTypefacePosition.sounds;
          this.word.pid = data.cbTypefacePosition.pid;
          this.word.lxProportion = data.cbTypefacePosition.lxProportion.replace(
            "%",
            ""
          );
          this.word.lyProportion = data.cbTypefacePosition.lyProportion.replace(
            "%",
            ""
          );
          this.word.rxProportion = data.cbTypefacePosition.rxProportion.replace(
            "%",
            ""
          );
          this.word.ryProportion = data.cbTypefacePosition.ryProportion.replace(
            "%",
            ""
          );
          this.$http({
            url: this.$http.adornUrl(
              "/sf/cbchapterpicture/info/" + this.word.pid
            ),
            method: "get",
          }).then(({ data }) => {
            this.chapterPos = data.cbChapterPicture.chapterPicture;
            this.dialogWordVisible = true;
          });
        });
      }
      this.type = status;
    },
    // 通过章节id删除章节
    deleteById(id, row) {
      this.$confirm(`确定对[章节id=${id}]进行[删除]操作?`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.hang = row;
          this.$http({
            url: this.$http.adornUrl("/sf/cbchapter/delete"),
            method: "post",
            data: this.$http.adornData([id], false),
          }).then(({ data }) => {
            if (data && data.code === 0) {
              this.$message({
                message: "删除成功",
                type: "success",
                duration: 1500,
                onClose: () => {
                  this.getChapterByUnitId();
                },
              });
            } else {
              this.$message.error(data.msg);
            }
          });
        })
        .catch(() => {});
    },
    // 表单提交
    chapterFormSubmit() {
      // 表单验证
      this.$refs["chapterForm"].validate((valid) => {
        if (valid) {
          this.$http({
            url: this.$http.adornUrl(`/sf/cbchapter/save`),
            method: "post",
            data: this.$http.adornData(
              {
                uid: this.chapter.uid,
                name: this.chapter.name,
                corder: this.chapter.corder,
                page: this.chapter.page,
                lxProportion: this.chapter.lxProportion + "%",
                lyProportion: this.chapter.lyProportion + "%",
                rxProportion: this.chapter.rxProportion + "%",
                ryProportion: this.chapter.ryProportion + "%",
              },
              false
            ),
          }).then(({ data }) => {
            if (data && data.code === 0) {
              this.$message({
                message: "添加成功",
                type: "success",
                duration: 1500,
                onClose: () => {
                  this.hang = {"id": data.chapter.id};
                  this.getChapterByUnitId();
                  this.dialogChapterVisible = false;
                },
              });
            } else {
              this.$message.error(data.msg);
            }
          });
        }
      });
    },
    // 字体表单提交
    wordFormSubmit() {
      // 表单验证
      this.$refs["wordForm"].validate((valid) => {
        if (valid) {
          this.$http({
            url: this.$http.adornUrl(`/sf/cbtypefaceposition/save`),
            method: "post",
            data: this.$http.adornData(
              {
                pid: this.word.pid,
                tid: this.word.tid,
                sounds: this.word.sounds,
                lxProportion: this.word.lxProportion + "%",
                lyProportion: this.word.lyProportion + "%",
                rxProportion: this.word.rxProportion + "%",
                ryProportion: this.word.ryProportion + "%",
              },
              false
            ),
          }).then(({ data }) => {
            if (data && data.code === 0) {
              this.$message({
                message: "添加成功",
                type: "success",
                duration: 1500,
                onClose: () => {
                  this.getChapterByUnitId();
                  this.dialogWordVisible = false;
                  this.fileList = [];
                },
              });
            } else {
              this.$message.error(data.msg);
            }
          });
        }
      });
    },
    // 图片表单提交
    chapterPictureFormSubmit() {
      // 表单验证
      this.$refs["chapterPictureForm"].validate((valid) => {
        if (valid) {
          this.$http({
            url: this.$http.adornUrl(`/sf/cbchapterpicture/save`),
            method: "post",
            data: this.$http.adornData(
              {
                cid: this.chapterPicture.cid,
                chapterPicture: this.chapterPicture.chapterPicture,
                corder: this.chapterPicture.corder,
              },
              false
            ),
          }).then(({ data }) => {
            if (data && data.code === 0) {
              this.$message({
                message: "添加成功",
                type: "success",
                duration: 1500,
                onClose: () => {
                  this.getChapterByUnitId();
                  this.dialogChapterPictureVisible = false;
                },
              });
            } else {
              this.$message.error(data.msg);
            }
          });
        }
      });
    },
    updateChapter() {
      // 表单验证,只需要验证章节名称
      this.$refs["chapterForm"].validate((valid) => {
        if (valid) {
          this.$http({
            url: this.$http.adornUrl(`/sf/cbchapter/update`),
            method: "post",
            data: this.$http.adornData(
              {
                id: this.chapter.id,
                name: this.chapter.name,
                corder: this.chapter.corder,
                page: this.chapter.page,
                lxProportion: this.chapter.lxProportion + "%",
                lyProportion: this.chapter.lyProportion + "%",
                rxProportion: this.chapter.rxProportion + "%",
                ryProportion: this.chapter.ryProportion + "%",
                uid: this.chapter.uid,
              },
              false
            ),
          }).then(({ data }) => {
            if (data && data.code === 0) {
              this.$message({
                message: "修改成功",
                type: "success",
                duration: 1500,
                onClose: () => {
                  this.getChapterByUnitId();
                  this.dialogChapterVisible = false;
                },
              });
            } else {
              this.$message.error(data.msg);
            }
          });
        }
      });
    },
    updateWord() {
      // 表单验证,只需要验证章节名称
      this.$refs["wordForm"].validate((valid) => {
        if (valid) {
          this.$http({
            url: this.$http.adornUrl(`/sf/cbtypefaceposition/update`),
            method: "post",
            data: this.$http.adornData(
              {
                id: this.word.id,
                tid: this.word.tid,
                sounds: this.word.sounds,
                lxProportion: this.word.lxProportion + "%",
                lyProportion: this.word.lyProportion + "%",
                rxProportion: this.word.rxProportion + "%",
                ryProportion: this.word.ryProportion + "%",
                pid: this.word.pid,
              },
              false
            ),
          }).then(({ data }) => {
            if (data && data.code === 0) {
              this.$message({
                message: "修改成功",
                type: "success",
                duration: 1500,
                onClose: () => {
                  this.getChapterByUnitId();
                  this.dialogWordVisible = false;
                },
              });
            } else {
              this.$message.error(data.msg);
            }
          });
        }
      });
    },
    // 上一步
    previous() {
      console.log("previous");
      this.$router.push({
        path: "/ruanbi/ruanbiUnitAdd/" + this.chapter.uid,
      });
    },
    // 下一步
    // 去欣赏
    toXs(id) {
      // 路由跳转
      this.$router.push({
        path: "/ruanbi/ruanbixsAdd/" + id,
      });
      // 记录到哪一步了和id
      this.$cookie.set("path", "ruanbixsAdd");
      this.$cookie.set("id", id);
    },
    // 去认读
    toRd(id) {
      // 路由跳转
      this.$router.push({
        path: "/ruanbi/ruanbirdAdd/" + id,
      });
      // 记录到哪一步了和id
      this.$cookie.set("path", "ruanbirdAdd");
      this.$cookie.set("id", id);
    },
    // 去观察
    toGc(id) {
      // 路由跳转
      this.$router.push({
        path: "/ruanbi/ruanbigcAdd/" + id,
      });
      // 记录到哪一步了和id
      this.$cookie.set("path", "ruanbigcAdd");
      this.$cookie.set("id", id);
    },
    // 去分析
    toFx(id) {
      // 路由跳转
      this.$router.push({
        path: "/ruanbi/ruanbifxAdd/" + id,
      });
      // 记录到哪一步了和id
      this.$cookie.set("path", "ruanbifxAdd");
      this.$cookie.set("id", id);
    },
    // 去笔法
    toBf(id) {
      // 路由跳转
      this.$router.push({
        path: "/ruanbi/ruanbibfAdd/" + id,
      });
      // 记录到哪一步了和id
      this.$cookie.set("path", "ruanbibfAdd");
      this.$cookie.set("id", id);
    },
    // 去对比
    toDb(id) {
      // 路由跳转
      this.$router.push({
        path: "/ruanbi/ruanbidbAdd/" + id,
      });
      // 记录到哪一步了和id
      this.$cookie.set("path", "ruanbidbAdd");
      this.$cookie.set("id", id);
    },
    // 去欣赏
    toLx(id) {
      // 路由跳转
      this.$router.push({
        path: "/ruanbi/ruanbistlxAdd/" + id,
      });
      // 记录到哪一步了和id
      this.$cookie.set("path", "ruanbistlxAdd");
      this.$cookie.set("id", id);
    },
  },
};
</script>
<style scoped>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
.chanpterList {
  position: relative;
  list-style: none;
  margin: 0;
  padding: 0;
}
.chanpterList li {
  position: relative;
}
.chanpterList p {
  float: left;
  font-size: 20px;
  margin: 10px 0;
  padding: 10px;
  height: 70px;
  line-height: 50px;
  width: 100%;
  border: 1px solid #ddd;
}
.chanpterList .acts {
  float: right;
  font-size: 14px;
}

.videoList {
  padding-left: 50px;
}
.videoList p {
  float: left;
  font-size: 14px;
  margin: 10px 0;
  padding: 10px;
  height: 50px;
  line-height: 30px;
  width: 100%;
  border: 1px dotted #ddd;
}
</style>
